<template>
  <div id="Register">
    <div class="login-con">
      <div class="login-con-left"></div>
      <div class="login-con-right">
        <div class="login-con-right-all">
          <div style="text-align: center;font-size: 22px;font-style: italic">注册</div>
          <el-form ref="formRef" :model="loginform" :rules="rules">
            <el-form-item prop="username">
              <el-input prefix-icon="Avatar" v-model="loginform.username" placeholder="请输入用户名"
                        required></el-input>
            </el-form-item>
            <el-form-item prop="email">
              <el-input prefix-icon="Avatar" v-model="loginform.email" placeholder="请输入邮箱"
                        required></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input prefix-icon="Lock" v-model="loginform.password" placeholder="请输入密码" required
                        show-password></el-input>
            </el-form-item>
            <div style="display: flex;justify-content: space-around">
              <el-button type="primary" @click="register">注册</el-button>
              <el-button type="primary" plain @click="$router.go(-1)">取消</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../utils/request";
import router from "@/router";

export default {
  name: 'Register',
  data() {
    return {
      loginform: {},
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          }
        ],
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur',
          }
        ]
      }
    }
  },

  methods: {
    router,

    register() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          request.post("/register", this.loginform).then(res => {
            if (res.code === 0) {
              this.$router.push("/");
            }
          })
        }
      })


    }
  }
}

</script>

<style lang="less" scoped>
#Register {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #409eff;
  opacity: 0.95;
}

.login-con {
  width: 55%;
  height: 75%;
  margin: 70px auto;
  border-radius: 20px;
  opacity: 0.85;
  transform: translateZ(10px);
}

.login-con-left {
  float: left;
  width: 45%;
  height: 100%;
  border-radius: 20px 0 0 20px;
  background: url('../assets/login-con-left.png') no-repeat;
  background-size: 100% 100%;
}

.login-con-right {
  float: left;
  width: 55%;
  height: 100%;
  background-color: white;
  border-radius: 0 20px 20px 0;
}

.login-con-right-all {
  width: 80%;
  height: 70%;
  margin: 150px auto 0;
}

#Register  .el-input {
  margin: 10px 0;
  color: black;
}
#Register :deep(.el-input__inner) {
  height: 4.5vh;
  font-size: 18px;
}
#Register :deep(.el-button) {
  transform:scale(1.3);
}
</style>
